<template>
  <div class="container">
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div class="loginPage">
        <div class="topImage">
          <img src="/static/images/signin_pic_bg.png">
        </div>
        <div class="content">
          <div class="tabWrap">
            <div class="tabArea">
              <!-- <div :class="['tabItem', loginType === 'password' ? 'hasChoLoginType' : '']" @click="handleChoLoginType('password')">手机登录</div> -->
              <div :class="['tabItem', loginType === 'message' ? 'hasChoLoginType' : '']" @click="handleChoLoginType('message')">短信登录</div>
            </div>
            <div :class="['tabBar', loginType === 'password' ? 'tabBarPwd' : 'tabBarMsg']"></div>
          </div>
          <!-- 手机登录 -->
          <div v-if="loginType === 'password'">
            <div class="pwdLogin">
              <div :class="['xInput', choOnFocusInput === 1 ? 'hasChoOnFocus' : '']">
                <div class="inputLabel">手机号码</div>
                <div class="inputArea">
                  <input maxlength="11" type="number" v-model="vals1" @focus="handleOnFocus_1" placeholder="请输入登录手机号" placeholder-style="color: #C7C7C7;fontWeight: normal;" />
                </div>
              </div>
              <div :class="['xInput', choOnFocusInput === 2 ? 'hasChoOnFocus' : '']">
                <div class="inputLabel">密码</div>
                <div class="inputArea">
                  <input type="password" @focus="handleOnFocus_2" v-model="vals2" placeholder="请填写登录密码" placeholder-style="color: #C7C7C7;;fontWeight: normal;" />
                </div>
              </div>
            </div>
          </div>
          <!-- 短信登录 -->
          <div v-else>
            <div class="msgLogin">
              <div :class="['xInput', choOnFocusInput === 3 ? 'hasChoOnFocus' : '']">
                <div class="inputLabel">手机号码</div>
                <div class="inputArea">
                  <input maxlength="11" type="number" @focus="handleOnFocus_3" v-model="vals3" placeholder="请输入登录手机号" placeholder-style="color: #C7C7C7;fontWeight: normal;" />
                </div>
              </div>
              <div :class="['xInput', choOnFocusInput === 4 ? 'hasChoOnFocus' : '']">
                <div class="inputLabel">验证码</div>
                <div class="inputArea yamGroup">
                  <input @focus="handleOnFocus_4" v-model="vals4" placeholder="请输入验证码" placeholder-style="color: #C7C7C7;fontWeight: normal;" />
                  <span :class="['yzm', showyzm ? 'yzmActive' : '' ]" @click="handleSendYzm">{{ yzmMsg }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="btn" @click="suresLogin(loginType)">登录</div>
          <span  @click="hadnleIntoRegister" class="goresta">没有账号？立即注册</span>
        </div>
        <div class="footerSign">© 2019 sx985.com, all rights reserved</div>
      </div>
    </scroll-view>  
  </div>  
</template>

<script>
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  data () {
    return {
      loginType: 'message', // password --> 手机登录    message --> 短信登录
      vals1: '', // 手机登录---账号
      vals2: '', // 手机登录---密码
      errMsgs1: '',
      errMsgs2: '',
      showColor: 'cancel',
      choOnFocusInput: 1,
      vals3: '', // 短信登录---账号
      vals4: '', // 短信登录---密码
      showColor1: 'cancel',
      yzmMsg: '获取验证码',
      nNum: 60,
      showyzm: false,
      timer: null,
      verifyType: 2 // 登录类型   1 --> 密码登录  2 --> 验证码登录
    }
  },
  watch: {
    vals1 (e) {
      if (e.length === 11) {
        const reg = /^1[23456789]\d{9}$/
        if (!reg.test(e)) {
          this.errMsgs1 = '请输入正确的11位手机号'
        } else {
          this.errMsgs1 = ''
        }
      }
    },
    vals2 (e) {
      if (e === '') {
        this.errMsgs2 = '请输入您的登录密码'
      } else {
        this.errMsgs2 = ''
      }
      if (this.errMsgs2 === '' & this.errMsgs1 === '' & this.vals1 !== '请输入手机号' & e !== '请输入登录密码') {
        this.showColor = 'sure'
      } else {
        this.showColor = 'cancel'
      }
    },
    vals3 (e) {
      const reg = /^1[23456789]\d{9}$/
      if (reg.test(e)) {
        this.showyzm = true
        if (this.vals4.length > 3) {
          this.showColor1 = 'sure'
        } else {
          this.showColor1 = 'cancle'
        }
      } else {
        this.showyzm = false
        this.showColor1 = 'cancle'
        this.yzmMsg = '获取验证码'
        this.nNum = 60
        clearInterval(this.timer)
      }
    },
    vals4 (e) {
      const reg = /^1[23456789]\d{9}$/
      if (e.length > 3 && reg.test(this.vals3)) {
        this.showColor1 = 'sure'
      } else {
        this.showColor1 = 'cancel'
      }
    }
  },
  methods: {
    handleChoLoginType (type) {
      if (type !== this.loginType) {
        this.loginType = type
        if (this.loginType === 'password') {
          this.choOnFocusInput = 1
          this.verifyType = 1
          this.vals1 = ''
          this.vals2 = ''
        } else {
          this.choOnFocusInput = 3
          this.verifyType = 2
          this.vals3 = ''
          this.vals4 = ''
          this.yzmMsg = '获取验证码'
          this.nNum = 60
          this.showyzm = false
        }
      }
    },
    handleOnFocus_1 () {
      this.choOnFocusInput = 1
    },
    handleOnFocus_2 () {
      this.choOnFocusInput = 2
    },
    handleOnFocus_3 () {
      this.choOnFocusInput = 3
    },
    handleOnFocus_4 () {
      this.choOnFocusInput = 4
    },
    // 发送验证码
    handleSendYzm () {
      if (this.showyzm) {
        this.senyam()
        this.$httpWX.post({
          url: '/shengxueApi/identity/sendTeacherMessageCode',
          data: {
            codeType: 1,
            mobile: this.vals3
          },
          header: {
            'content-type': 'application/json', // 默认值
            'Api-Version': '2.0.1'
          }
        }).then(res => {
          if (res.code === '0') {
            wx.showToast({
              title: res.message,
              icon: 'success',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: '账号不存在',
              icon: 'loading'
            })
            setTimeout(() => {
              this.showyzm = true
              this.showColor1 = 'sure'
              this.yzmMsg = '获取验证码'
              this.nNum = 60
              clearInterval(this.timer)
            }, 1000)
          }
        })
      }
    },
    senyam () {
      this.showyzm = false

      this.timer = setInterval(() => {
        this.nNum -= 1
        this.yzmMsg = '重新获取' + this.nNum
        if (this.nNum <= 0) {
          clearInterval(this.timer)
          this.yzmMsg = '获取验证码'
          this.showyzm = true
          this.nNum = 60
        }
      }, 1000)
    },
    suresLogin (type) {
      if (type === 'password') {
        if (this.showColor === 'sure') {
          const reg = /^1[23456789]\d{9}$/
          if (this.vals1.length < 11 && !reg.test(this.vals1)) {
            wx.showToast({
              title: '未正确填写登录手机号',
              icon: 'none'
            })
            return false
          }
          if (this.vals2 === '') {
            wx.showToast({
              title: '未填写登录密码',
              icon: 'none'
            })
            return false
          }
          let encryptor = new JSEncrypt() // 新建JSEncrypt对象
          let publicKey =
          `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
          encryptor.setPublicKey(publicKey) // 设置公钥
          const regTime = new Date().getTime()
          const rsaPassWord = encryptor.encrypt(regTime + this.vals2) // 对需要加密的数据进行加密
          this.loginTea(this.vals1, rsaPassWord, regTime)
        } else {
          wx.showToast({
            title: '请正确填写登录信息',
            icon: 'none'
          })
        }
      } else if (type === 'message') {
        if (this.showColor1 === 'sure') {
          const timss = new Date().getTime()
          this.loginTea(this.vals3, this.vals4, timss)
        } else {
          wx.showToast({
            title: '请正确填写登录信息',
            icon: 'none'
          })
        }
      }
    },
    loginTea (phonenum, yzm, times) {
      this.$httpWX.post({
        url: '/shengxueApi/identity/teacherLogin',
        data: {
          'account': phonenum,
          'credentials': yzm,
          'loginTime': times,
          'verifyType': this.verifyType
        },
        header: {
          'content-type': 'application/json', // 默认值
          'Api-Version': '2.0.1'
        }
      }).then(res => {
        if (res.code === '0') {
          this.vals1 = ''
          this.vals2 = ''
          this.vals3 = ''
          this.vals4 = ''
          wx.showToast({
            title: res.message,
            icon: 'success',
            duration: 2000
          })
          wx.setStorage({
            key: 'teacherData',
            data: JSON.stringify(res.data)
          })
          wx.setStorage({ 
            key: 'tokens',
            data: res.data.accessToken
          })
          wx.reLaunch({ url: '../index/main' })
        } else {
          wx.showToast({
            title: '验证码错误',
            icon: 'loading'
          })
        }
      })
    },
    hadnleIntoRegister () {
      wx.navigateTo({ url: '../register/main' })
    }
  }
}
</script>

<style lang="less" scoped>
.loginPage {
  background: #fff;
  padding-bottom: 100rpx;
  .topImage {
    position: relative;
    width: 100%;
    z-index: 1000;
    img {
      width: 100%;
      height: 382rpx;
    }
  }
  .content {
    box-sizing: border-box;
    position: relative;
    top: -47rpx;
    width: 686rpx;
    height: 760rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2rpx 10rpx 0 rgba(153, 153, 153, 0.2);
    border-radius: 20rpx;
    margin: 0 32rpx;
    padding: 40rpx 32rpx 0;
    .tabWrap {
      padding: 18rpx 165rpx 0;
      position: relative;
      margin-bottom: 64rpx;
      .tabArea {
        display: flex;
        // justify-content: space-between;
        justify-content: center;
        align-items: center;
        .tabItem {
          color: #999;
          font-size: 30rpx;
          font-weight: normal;
        }
        .hasChoLoginType {
          font-weight: bold;
          color: #222;
        }
      }
      .tabBar {
        width: 48rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: #FFAD0D;
        position: absolute;
        transition: all 0.2s;
        bottom: -32rpx;
      }
      .tabBarPwd {
        left: 200rpx;
      }
      .tabBarMsg {
        // left: 380rpx;
        left: 290rpx;
      }
    }
    .pwdLogin, .msgLogin {
      margin-bottom: 54rpx;
      .xInput {
        margin-bottom: 24rpx;
        .inputLabel {
          color: #999;
          font-size: 30rpx;
          font-weight: bold;
        }
        .inputArea {
          height: 88rpx;
          width: 100%;
          padding: 20rpx 10rpx;
          border-bottom: 2rpx solid #E5E8ED;
          input {
            height: 100%;
            font-size: 30rpx;
            color: #222;
          }
        }
      }
      .hasChoOnFocus {
        .inputLabel {
          color: #FFAD0D;
        }
        .inputArea {
          border-bottom-color: #FFAD0D;
        }
      }
    }
    .msgLogin {
      margin-bottom: 54rpx;
      .yamGroup {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .yzm {
          display: inline-block;
          width: 204rpx;
          height: 72rpx;
          line-height: 72rpx;
          border-radius: 36rpx;
          background: #F7F7FA;
          color: #C8C8C8;
          font-size: 30rpx;
          text-align: center;
        }
        .yzmActive {
          background: #FFAD0D;
          color: #fff;
        }
      }
    }
    .btn {
      height: 88rpx;
      line-height: 88rpx;
      width: 100%;
      border-radius: 44rpx;
      background: #FFAD0D;
      color: #FFF;
      text-align: center;
      font-weight: bold;
    }
    .goresta {
      font-size: 30rpx;
      color: #FFAD0D;
      display: block;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      text-decoration: none;
      margin-top: 24rpx;
    }
  }
  .footerSign {
    font-size: 0.22rem;
    color: #999;
    text-align: center;
    margin-top: 0.1rem;
  }
}
</style>
